<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        后台管理系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">

    <style>
        .imgs {
            display: none;
        }
    </style>
    <!--百度编辑器-->

</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>栏目管理</cite></a>
              <a><cite>基本设置</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>

<form class="layui-form layui-form-pane" id="add" enctype="multipart/form-data">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
        </ul>
        <div class="layui-form-item">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="系统自动生成" readonly>
                <input type="hidden" name="category_id" id="category_id" required lay-verify="required"
                       autocomplete="off"
                       class="layui-input" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择目</label>
            <div class="layui-input-block">
                <select id="level1-select" lay-filter="level1-select-filter" required>
                    {% for i1 in lv1 %}
                        <option value="{{ i1.id }}">{{ i1.category_name }}</option>
                    {% endfor %}

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择科</label>
            <div class="layui-input-block">
                <select id="level2-select" lay-filter="level2-select-filter" required>
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择属</label>
            <div class="layui-input-block">
                <select id="level3-select" lay-filter="level3-select-filter" required>
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="insect_name" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入名称">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">拼音</label>
            <div class="layui-input-block">
                <input type="text" name="insect_spell" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入拼音">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学名</label>
            <div class="layui-input-block">
                <input type="text" name="scientific_name" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入学名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-block">
                <input type="text" name="insect_alias" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入别名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="insect_remark" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入备注">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <input type="text" name="insect_introduce" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入简介">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分布地区</label>
            <div class="layui-input-block">
                <input type="text" name="distribution_area" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入分布地区">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">防治措施</label>
            <div class="layui-input-block">
                <input type="text" name="prevent_measure" required lay-verify="required" autocomplete="off"
                       class="layui-input" placeholder="请输入防治措施">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <img id="inspect_image" width="100px" height="100px" src="/static/images/need_upload.png" alt=""/>
                <input type="file" id="fileUpload" onchange="importDfFile()" value="上传文件">
                <input type="hidden" id="img_url" name="img_url" class="layui-input"/>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">经度</label>
                <div class="layui-input-inline">
                    <input type="text" id="longitude" name="longitude" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">纬度</label>
                <div class="layui-input-inline">
                    <input type="text" id="latitude" name="latitude" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">点击地图标点</label>
            <div class="layui-inline">
                <div id="map_container" style="height: 400px;width: 600px"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div>
                <button class="layui-btn" id="submitBtn">立即提交</button>
            </div>
        </div>

</form>


</body>
<script src="static/lib/layui/layui.js" charset="utf-8"></script>
<script src="static/js/x-layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=waApPw6gErjwfBBALf71OCgLTk8FbPqr"></script>


<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    {#UE.getEditor('content', {initialFrameWidth: 600, initialFrameHeight: 400,});#}
</script>

<!--栏目缩略图上传-->
<script>
    layui.use('form', function () {
        var form = layui.form();
        form.on('select(level1-select-filter)', function (data) {
            var value = data.value;
            doSelectEmpty(2)
            doSelectEmpty(3)
            level2OptionHandle(value, 2)
            form.render('select', 'level2-select-filter')
            form.render('select', 'level3-select-filter')
        });
        form.on('select(level2-select-filter)', function (data) {
            var value = data.value;
            level2OptionHandle(value, 3)
            form.render('select', 'level3-select-filter')
        });
        form.on('select(level3-select-filter)', function (data) {
            var value = data.value;
            $('#category_id').val(value)
        });


    });

    // An highlighted block
    //百度地图API功能
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=waApPw6gErjwfBBALf71OCgLTk8FbPqr&callback=init";
        document.body.appendChild(script);
    }

    var map = null
    window.init = function () {
        map = new BMapGL.Map("map_container");          // 创建地图实例
        var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
        map.enableScrollWheelZoom(true);
        map.centerAndZoom(point, 5);
        map.addEventListener('click', mapClick);
    }

    function mapClick(e){
        console.log(e)
        var eleLng = $('#longitude')
        var eleLat = $('#latitude')

        var lat = e.latlng.lat
        var lng = e.latlng.lng

        map.clearOverlays();
        var point = new BMapGL.Point(lng, lat);
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);

        eleLng.val(lng)
        eleLat.val(lat)
    }


    loadJScript()

    function doSelectEmpty(level) {
        if (level === 2) {
            var lv2_element = $("#level2-select")
            lv2_element.empty()
            lv2_element.append("<option value='-1'> 请选择 </option>")
        }
        if (level === 3) {
            var lv3_element = $("#level3-select")
            lv3_element.empty()
            lv3_element.append("<option value='-1'> 请选择 </option>")
        }
    }

    function level2OptionHandle(parentId, level) {
        $.ajax({
            url: "/category-simple-list?level=" + level + "&parentId=" + parentId,  // 后端处理URL
            async: false,
            method: "GET",
            success: function (result) {
                var options = result.map(r => {
                    return "<option value=" + r.id + "> " + r.category_name + " </option>"
                })

                var lv_element = level === 2 ? $("#level2-select") : $("#level3-select")
                lv_element.append(options)

            },
        });

    }

    //导入附件
    function importDfFile() {
        var formData = new FormData();
        // 获取上传文件的数据
        formData.append('file', $("#fileUpload")[0].files[0]);
        $.ajax({
            url: "/upload",
            type: 'post',
            async: false,
            processData: false,// 将数据转换成对象，不对数据做处理，故 processData: false
            contentType: false,    // 不设置数据类型
            data: formData,
            success: function (data) {
                $('#inspect_image').attr('src', data)
                $('#img_url').val(data)
            },
            error: function (data) {
            }
        })
        $("#fielUpload").val("");
        hideMask();
    }


    $(document).ready(function () {
        $("#submitBtn").click(function (event) {
            event.preventDefault();
            $.ajax({
                url: "/insect_add",  // 后端处理URL
                method: "POST",       // 使用POST方法提交
                data: $("#add").serialize(),  // 使用serialize()方法将表单数据序列化
                success: function (response) {
                    // 请求成功时的处理逻辑
                    alert("添加成功");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    parent.location.reload();
                },
                error: function (xhr, status, error) {
                    // 请求失败时的处理逻辑
                    alert("添加失败");
                }
            });
        });
    });

</script>


</html>